<template>
  <q-card style="width: 100%;padding-top: 40px;">
    <q-card-section class="row">
      <q-card class="col-6 q-col-gutter">
        <q-card-section>
          <q-banner dense class="text-white bg-red">
            CPU
          </q-banner>
          <q-markup-table separator="cell">
            <tbody>
            <tr>
              <td>核心数</td>
              <td>{{ osInfo.cpuCount }}</td>
            </tr>
            <tr>
              <td>cpu使用率</td>
              <td>{{ osRuntimeInfo.cpuUsage }}</td>
            </tr>
            <tr>
              <td>cpu空闲率</td>
              <td>{{ osRuntimeInfo.cpuUsage }}</td>
            </tr>
            <tr>
              <td>cpu基准速度</td>
              <td>{{ osRuntimeInfo.cpuMaxFreq }}</td>
            </tr>
            <tr>
              <td>cpu速度</td>
              <td>{{ osRuntimeInfo.cpuCurrentFreq }}</td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
      <q-card class="col-6 q-col-gutter">
        <q-card-section>
          <q-banner dense class="text-white bg-red">
            内存
          </q-banner>
          <q-markup-table separator="cell">
            <tbody>
            <tr>
              <td>内存总量</td>
              <td>{{ osRuntimeInfo.totalMemory }}</td>
            </tr>
            <tr>
              <td>内存使用量</td>
              <td>{{ osRuntimeInfo.usedMemory }}</td>
            </tr>
            <tr>
              <td>内存使用率</td>
              <td>{{ osRuntimeInfo.usedPercent }}</td>
            </tr>
            <tr>
              <td>虚拟总内存</td>
              <td>{{ osRuntimeInfo.swapTotalMemory }}</td>
            </tr>
            <tr>
              <td>已用虚拟内存</td>
              <td>{{ osRuntimeInfo.swapUsedMemory }}</td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
    </q-card-section>
    <q-card-section class="row">
      <q-card class="col-12">
        <q-card-section>
          <q-banner dense class="text-white bg-red">
            服务器信息
          </q-banner>
          <q-markup-table separator="cell">
            <tbody>
            <tr>
              <td>操作系统</td>
              <td>{{ osInfo.os }}</td>
              <td>系统架构</td>
              <td>{{ osInfo.osArch }}</td>
            </tr>
            <tr>
              <td>java版本</td>
              <td>{{ osInfo.javaVersion }}</td>
              <td>工作目录</td>
              <td>{{ osInfo.userDir }}</td>
            </tr>
            <tr>
              <td>主机IP</td>
              <td>{{ osInfo.host }}</td>
              <td>主机名称</td>
              <td>{{ osInfo.hostName }}</td>
            </tr>
            <tr>
              <td>运行时长</td>
              <td>{{ osInfo.runTime }}</td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
    </q-card-section>
    <q-card-section class="row">
      <q-card class="col-12">
        <q-card-section class="row">
          <q-banner dense class="text-white bg-red col-12">
            磁盘信息
          </q-banner>
          <q-card-section class="col-6" v-for="disk in osRuntimeInfo.disksList">
            <div class="doc-card-title bg-amber10 text-white" style="width: 10%">{{ disk.dirName }}</div>
            <q-markup-table separator="cell">
              <tbody>
              <tr>
                <td>挂载点</td>
                <td>{{ disk.dirName }}</td>
                <td>文件系统名称</td>
                <td>{{ disk.sysTypeName }}</td>
                <td>文件系统类型</td>
                <td>{{ disk.typeName }}</td>
              </tr>
              <tr>
                <td>磁盘总量</td>
                <td>{{ disk.total }}</td>
                <td>磁盘使用量</td>
                <td>{{ disk.used }}</td>
                <td>磁盘剩余量</td>
                <td>{{ disk.free }}</td>
              </tr>
              <tr>
                <td>磁盘使用率</td>
                <td>{{ disk.usedPercent }}</td>
              </tr>
              <q-space></q-space>
              </tbody>
            </q-markup-table>
          </q-card-section>
        </q-card-section>
      </q-card>
    </q-card-section>
    <q-card-section>
      <q-card>
        <q-card-section>
          <q-banner dense class="text-white bg-red">
            网卡信息
          </q-banner>
          <q-markup-table separator="cell">
            <thead>
            <th>ipv4地址</th>
            <th>mac地址</th>
            <th>网卡名称</th>
            <th>上传速度</th>
            <th>下载速度</th>
            </thead>
            <tbody>
            <tr v-for="network in networkInfo">
              <td class="text-center">{{ network.ipv4Address }}</td>
              <td class="text-center">{{ network.macAddress }}</td>
              <td class="text-center">{{ network.netowrkName }}</td>
              <td class="text-center">{{ network.upSpeed }}</td>
              <td class="text-center">{{ network.downSpeed }}</td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
    </q-card-section>
    <q-card-section>
      <q-card>
        <q-card-section>
          <q-banner dense class="text-white bg-red">
            java虚拟机
          </q-banner>
          <q-markup-table separator="cell">
            <tbody>
            <tr>
              <td>当前JVM占用的内存总数(M)</td>
              <td>{{ jvmInfo.total }}</td>
              <td>JVM最大可用内存总数(M)</td>
              <td>{{ jvmInfo.max }}</td>
            </tr>
            <tr>
              <td>JVM空闲内存(M)</td>
              <td>{{ jvmInfo.free }}</td>
              <td>JDK版本</td>
              <td>{{ jvmInfo.version }}</td>
            </tr>
            <tr>
              <td>JDK路径</td>
              <td>{{ jvmInfo.home }}</td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
    </q-card-section>
  </q-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {postAction} from "src/api/manage";

const url = {
  getDataUrl: 'systemInfo',
}
onMounted(() => {
  getData()
})
const osRuntimeInfo = ref({})
const osInfo = ref({})
const networkInfo = ref({})
const jvmInfo = ref({})
const getData = async () => {
  const res = await postAction(url.getDataUrl)
  if (res.code === 200) {
    osRuntimeInfo.value = res.data.osRuntimeInfo
    osInfo.value = res.data.osInfo
    networkInfo.value = res.data.networkInfo
    jvmInfo.value = res.data.jvmInfo
  }
}
</script>
